function readJSON() {

    // Check if the hikes object exists in local storage 
    let hikes = localStorage.getItem('hikes');
    if (!hikes) {
        document.getElementById('hikeCards').innerHTML = '<p>No hikes found.</p>';
    } else {
        hikes = JSON.parse(hikes);

        // Iterate over the hikes and create Bootstrap cards dynamically 
        hikes.hikes.forEach(hike => {
            // Create card elements 
            const card = document.createElement('div');
            card.classList.add('card', 'col-md-4');

            const cardBody = document.createElement('div');
            cardBody.classList.add('card-body');

            const floating = document.createElement('p');   
            floating.classList.add('card-text');
            floating.textContent = 'Email address: ' + hike.floating;

            const password = document.createElement('p');
            password.classList.add('card-text');
            password.textContent = 'Password: ' + hike.password;

            // Append elements to the card 
            cardBody.appendChild(floating);
            cardBody.appendChild(password);
            card.appendChild(cardBody);
            // Append card to the container 
            document.getElementById('hikeCards').appendChild(card);
        });
    }
}
readJSON();
